<template>
	<view class="main">
		<view class="information">
			<view class="info_content">
				<view style="font-size: large; font-weight: bold;">{{name}}</view>
				<view style="font-size: small; color: gray;">{{postion}}</view>
			</view>

		</view>
		<view class="timeLine">
			<view class="timeLine_container">
				<!-- 循环渲染日期和星期 -->
				<view class="timeItem" v-for="(item, index) in timeLines" :key="index"
					:class="{ selected: selectedDate === index }" @click="selectDate(index)">
					<view class="date">{{ item.formattedDate }}</view>
					<view class="day">{{ item.dayOfWeekName }}</view>
				</view>
			</view>
		</view>

		<!-- 动态渲染时间段 -->
		<view class="timeSlot_container">
			<view v-if="selectedDate !== null && timeSlots.length > 0" class="timeSlots">
				<view v-for="(slot, index) in timeSlots" :key="index" class="timeSlot" @click="selectTimeSlot(slot)"
					:class="{ active: selectedTime === slot }">
					<view>{{ slot.timeRange }}</view>
					<view class="reservedCount">已约人数：{{ slot.reservedCount }}</view>
				</view>

			</view>
		</view>

		<view class="btn">
			<wd-button @click="confirm" :disabled="selectedTime == null">预定</wd-button>
		</view>
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni'
	import {
		useAppointStore
	} from "../../../stores/appoint";
	const message = useMessage()
	const {
		uid,
		name,
		postion
	} = useAppointStore()
	// 日期数据
	const timeLines = reactive([]);
	const today = new Date();
	const selectedDate = ref(0); // 默认选中今天的日期索引
	const selectedTime = ref(null); // 当前选中的时间段
	const timeSlots = reactive([]); // 动态时间段列表

	// 工具函数：获取日期和星期
	const getDateMessage = (date) => {
		const month = date.getMonth() + 1; // 月份从0开始
		const day = date.getDate();
		const formattedDate = `${month}.${day}`;
		const dayOfWeek = date.getDay();
		const daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
		const dayOfWeekName = daysOfWeek[dayOfWeek];

		return {
			dayOfWeekName,
			formattedDate,
		};
	};

	// 获取从今天开始往后七天的日期及星期
	const getAllDates = () => {
		for (let i = 0; i < 7; i++) {
			const nextDate = new Date(today.getTime() + i * 24 * 60 * 60 * 1000); // 每天增加1天
			const {
				dayOfWeekName,
				formattedDate
			} = getDateMessage(nextDate);
			timeLines.push({
				dayOfWeekName,
				formattedDate,
				reserved: false, // 是否已预定
			});
		}
		generateTimeSlots();
	};

	// 点击日期卡切换选中状态
	const selectDate = (index) => {
		selectedDate.value = index;
		selectedTime.value = null; // 重置时间段选择
		timeSlots.splice(0, timeSlots.length); // 清空时间段
		generateTimeSlots();
	};

	// 生成时间段范围（如 10:00 ~ 11:00）
	const generateTimeSlots = () => {
		timeSlots.splice(0, timeSlots.length); // 清空时间段
		for (let i = 10; i < 22; i++) { // 注意终止时间是 21:00 ~ 22:00
			const startHour = i < 10 ? `0${i}` : i;
			const endHour = i + 1 < 10 ? `0${i + 1}` : i + 1;
			timeSlots.push({
				timeRange: `${startHour}:00 ~ ${endHour}:00`,
				reservedCount: Math.floor(Math.random() * 10), // 模拟随机已约人数
			});
		}
	};

	// 选择时间段
	const selectTimeSlot = (slot) => {
		selectedTime.value = slot;
		// alert(`已选择时间段：${slot}`);
	};

	function confirm() {
		message
			.confirm({
				msg: `${timeLines[selectedDate.value].formattedDate} ${timeLines[selectedDate.value].dayOfWeekName} ${selectedTime.value.timeRange}`,
				title: '确定预约时间'
			})
			.then(() => {
				console.log('点击了确认按钮')
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})
	}

	getAllDates();
</script>

<style lang="less">
	.main {
		min-height: 100vh;
		width: 100vw;
		background-color: rgb(238, 238, 238);
		// padding: 2vw;

		.information {
			width: 100%;
			height: 20vh;
			background-color: white;
			margin-bottom: 15px;
			background-image: url('/static/mock/building/lqc01.jpg');
			background-size: 100%;
			background-repeat: no-repeat;
			position: relative;

			.info_content {
				position: absolute;
				background-color: #f5f5f5;
				border-radius: 8px;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				text-align: center;
				width: 70%;
				height: 35%;
				left: 15%;
				top: 60%
			}
		}

		.timeLine {
			width: 100%;
			height: 20vh;
			background-color: white;
			overflow-x: auto;
			white-space: nowrap;

			.timeLine_container {
				display: flex;
				align-items: center;
				height: 100%;
			}

			.timeItem {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 8px;
				width: 100px;
				height: 80%;
				text-align: center;
				margin: 0 10px;
				background-color: #f5f5f5;
				border-radius: 8px;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				cursor: pointer;

				&.selected {
					background-color: #007bff;
					color: white;
				}

				.date {
					font-size: 1rem;
					font-weight: bold;
					color: #333;
				}

				.day {
					font-size: 0.9rem;
					color: #666;
					margin-top: 5px;
				}

				.reserveButton {
					margin-top: 10px;
					padding: 5px 10px;
					font-size: 0.9rem;
					color: white;
					background-color: #007bff;
					border: none;
					border-radius: 5px;
					cursor: pointer;
				}

				.reserveButton:disabled {
					background-color: gray;
					cursor: not-allowed;
				}
			}
		}

		.timeSlot_container {
			height: 40vh;
			overflow-y: scroll;
			overflow-x: hidden;

			.timeSlot {
				display: flex;
				justify-content: space-between;
				/* 时间段和人数对齐 */
				align-items: center;
				width: 96%;
				padding: 10px;
				margin: 15px 0;
				background-color: #f5f5f5;
				border-radius: 5px;
				cursor: pointer;
				transition: background-color 0.2s;

				&:hover {
					background-color: #007bff;
					color: white;
				}

				&.active {
					background-color: #007bff;
					color: white;
				}

				.reservedCount {
					padding-right: 15px;
					font-size: 0.85rem;
					color: #666;
				}
			}

		}

		.btn {
			display: flex;
			justify-content: center;
		}
	}
</style>